<!--
  * 时间：2024/11/21
  * 作者：刘岩
  * 描述：客流密度折线图
-->
<template>
  <div class="density-line">
    <div class="echarts" ref="echartsBox"></div>
  </div>
</template>

<script>
import * as echarts from 'echarts'
require('echarts/theme/macarons') // echarts theme
export default {
  name: 'densityLine',
  props: {
    xData: {
      type: Array,
      default: () => {
        return [];
      }
    },
    yData: {
      type: Array,
      default: () => {
        return [];
      }
    }
  },
  data () {
    return {

    }
  },
  watch: {
    xData() {
      this.init();
    },
    yData() {
      this.init();
    }
  },
  mounted() {
    this.init();
  },
  methods: {
    /**
     * 时间：2024/11/22
     * 作者：刘岩
     * 功能：渲染进客量图表
     */
    init() {
      let myChart = echarts.init(this.$refs.echartsBox, 'macarons');
      let option = {
        tooltip: {
          trigger: 'axis',
          axisPointer: {
            type: 'shadow'
          }
        },
        grid: {
          left: '20',
          top: '40',
          right: '20',
          bottom: '50',
          containLabel: true
        },
        xAxis: [
          {
            type: 'category',
            data: this.xData,
            axisTick: {
              alignWithLabel: true
            },
            axisLabel: {
              color: '#000000',
              fontSize: 14
            }
          }
        ],
        yAxis: {
          type: 'value',
          name: '人数',
          nameTextStyle: {
            color: "#000000",
            fontSize: 14,
            padding: [0, 15, 4, 45]
          },
          axisLabel: {
            color: '#000000',
            fontSize: 14
          },
          splitLine: {
            //修改背景线条样式
            show: true, //是否展示
            lineStyle: {
              color: '#1C3F61', //线条颜色
              type: 'dashed' //线条样式，默认是实现，dashed是虚线
            }
          }
        },
        series: [
          {
            name: 'Direct',
            type: 'line',
            data: this.yData
          }
        ]
      };
      myChart.setOption(option);
      window.addEventListener('resize', () => {
        myChart.resize();
      });
    }
  }
}
</script>

<style scoped lang="scss">
.density-line {
  display: flex;
  flex: 1;
  flex-direction: column;
  .echarts {
    flex: 1;
  }
}
</style>
